<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>{{ popData.title }}</span>
    </div>
    <el-form :model="form" class="form" label-width="110px" label-position="right">
      <el-form-item label=" 父级菜单">
        <!--<el-input v-model="form.parentId" placeholder="请填写 父级菜单" />-->
        <el-cascader
          v-model="form.parentId"
          placeholder="请选择父级菜单"
          :disabled="popData.type === 2"
          :options="menuTree"
          :props="menuProps"
          :show-all-levels="false"
        />
      </el-form-item>
      <el-form-item label=" 路由地址">
        <el-input v-model="form.path" :disabled="popData.type === 2" placeholder="请填写 路由地址(path)" />
      </el-form-item>
      <el-form-item label=" 菜单名称">
        <el-input v-model="form.title" :disabled="popData.type === 2" placeholder="请填写 菜单名称(title)" />
      </el-form-item>
      <el-form-item label=" 组件地址">
        <el-input v-model="form.component" :disabled="popData.type === 2" placeholder="请填写 组件地址(component)" />
      </el-form-item>
      <el-form-item label=" 路由名称">
        <el-input v-model="form.name" :disabled="popData.type === 2" placeholder="请填写 路由名称(name)" />
      </el-form-item>
      <el-form-item label=" 重定向地址">
        <el-input v-model="form.redirect" :disabled="popData.type === 2" placeholder="请填写 重定向地址(redirect)" />
      </el-form-item>
      <el-form-item label=" icon">
        <el-input v-model="form.icon" :disabled="popData.type === 2" placeholder="请填写 icon地址" />
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否永远显示">
            <el-select
              v-model="form.alwaysShow"
              :disabled="popData.type === 2"
            >
              <el-option label="展示" :value="true" />
              <el-option label="隐藏" :value="false" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否隐藏">
            <el-select
              v-model="form.hidden"
              :disabled="popData.type === 2"
            >
              <el-option label="展示" :value="false" />
              <el-option label="隐藏" :value="true" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="popData.type !== 2">
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="edit">{{ loadingText }}</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="cancel">取消</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>
<script>
import sysMenu from '@/api/sysMenu'
export default {
  props: ['popData'],
  data() {
    return {
      form: {
        hidden: false
      },
      menuProps: {
        label: 'title',
        value: 'id'
      },
      loadingText: '保存',
      menuTree: []
    }
  },
  created() {
    const id = this.popData.id
    if (id) {
      this.form.id = id
      this.loadingText = '编辑'
      this.getDetailById(id)
    } else {
      this.loadingText = '保存'
    }
    this.allTree()
  },
  methods: {
    getDetailById(id) {
      sysMenu.getById(id).then(res => {
        this.form = res.data
      })
    },
    allTree() {
      sysMenu.allTree({}).then(resp => {
        this.menuTree = resp.data
      })
    },
    edit() {
      const tmpArr = this.form.parentId
      this.form.parentId = tmpArr[tmpArr.length - 1]
      sysMenu.edit(this.form).then(res => {
        this.$message.success(res.message)
        this.$parent.closePop()
      })
    },
    cancel() {
      this.$parent.closePop()
    }
  }
}
</script>
<style>
.form{
  margin: auto auto;
}
</style>
